/* ====================================================== 
   <!-- Typography -->            
/* ====================================================== */

/*
 * 1. General                    
 * 2. Hyperlink                        
 * 3. Heading (h1,h2,h3,h4,h5,h6) 
 * 4. Text Effect
 * 5. Drop Cap
 * 6. Vertical Text
*/


/* 
 ---------------------------
 1. General
 ---------------------------
 */ 
a,
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
.poemkit-typo--h1, 
.poemkit-typo--h2, 
.poemkit-typo--h3, 
.poemkit-typo--h4, 
.poemkit-typo--h5, 
.poemkit-typo--h6 {
    @include transition-default();
}

/* 
 ---------------------------
 2. Hyperlink
 ---------------------------
 */ 
a {
	color: $primary-link-color;
	text-decoration: none;
	
	&:hover{
		color: #000;
		text-decoration: none;
	}
}

/* 
 ---------------------------
 3. Heading (h1,h2,h3,h4,h5,h6)
 ---------------------------
 */ 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
.poemkit-typo--h1, 
.poemkit-typo--h2, 
.poemkit-typo--h3, 
.poemkit-typo--h4, 
.poemkit-typo--h5, 
.poemkit-typo--h6 {
	color: $heading-text-color;
	font-weight: 700;
	font-variant-ligatures: common-ligatures;
	/*Ligatures and contextual forms are ways of combining glyphs to produce more harmonized forms.*/
	margin-top: 0;
	margin-bottom: 0.625rem;
	padding: 0 0 0.546875rem;
	word-wrap: break-word;
	

}

h1 {
	font-size: $font-size-h1;
	line-height: 1.14285714286;
}

h2 {
	font-size: $font-size-h2;
	line-height: 1.2;
}

h3 {
	font-size: $font-size-h3;
	line-height: 1.25;
}

h4 {
	font-size: $font-size-h4;
	line-height: 1.33333333333;
}

h5 {
	font-size: $font-size-h5;
	line-height: 1.33333333333;
	font-weight: 600;
}

h6 {
	font-size: $font-size-h6;
	line-height: 1.5;
	font-weight: 600;
}

.poemkit-typo--h1 {
	font-size: $font-size-h1 !important;
	line-height: 1.14285714286 !important;
}

.poemkit-typo--h2 {
	font-size: $font-size-h2 !important;
	line-height: 1.2 !important;
}

.poemkit-typo--h3 {
	font-size: $font-size-h3 !important;
	line-height: 1.25 !important;
}

.poemkit-typo--h4 {
	font-size: $font-size-h4 !important;
	line-height: 1.33333333333 !important;
}

.poemkit-typo--h5 {
	font-size: $font-size-h5 !important;
	line-height: 1.33333333333 !important;
	font-weight: 600 !important;
}

.poemkit-typo--h6 {
	font-size: $font-size-h6 !important;
	line-height: 1.5 !important;
	font-weight: 600 !important;
}


@media all and (max-width: 768px) {
	h1 {
		font-size: #{$font-size-h1*0.71428571428571};
		line-height: 1.15555556;
	}
	h2 {
		font-size: #{$font-size-h2*0.7};
		line-height: 1.421875;
	}
	h3 {
		font-size: #{$font-size-h3*0.71428571428571};
		line-height: 1.625;
	}
	.poemkit-typo--h1 {
		font-size: #{$font-size-h1*0.71428571428571} !important;
		line-height: 1.15555556 !important;
	}
	.poemkit-typo--h2 {
		font-size: #{$font-size-h2*0.7} !important;
		line-height: 1.421875 !important;
	}
	.poemkit-typo--h3 {
		font-size: #{$font-size-h3*0.71428571428571} !important;
		line-height: 1.625 !important;
	}
}

@media all and (max-width: 480px) {
	h1 {
		font-size: #{$font-size-h1*0.60714285714286};
		line-height: 1.38461538462;
	}
	h2 {
		font-size: #{$font-size-h2*0.7};
		line-height: 1.28571428571;
	}
	h3 {
		font-size: #{$font-size-h3*0.78571428571429};
		line-height: 1.5;
	}
	.poemkit-typo--h1 {
		font-size: #{$font-size-h1*0.35714285714286} !important;
		line-height: 1.38461538462 !important;
	}
	.poemkit-typo--h2 {
		font-size: #{$font-size-h2*0.6} !important;
		line-height: 1.28571428571 !important;
	}
	.poemkit-typo--h3 {
		font-size: #{$font-size-h3*0.71428571428571} !important;
		line-height: 1.5 !important;
	}
}	



/* 
 ---------------------------
 4. Text Effect
 ---------------------------
 */ 
.poemkit-typo--style-normal {
	font-family: $font-stack;
	font-weight: 400 !important;
}

.poemkit-typo--style-uppercase {
    text-transform: uppercase !important;
}

.poemkit-typo--style-bold {
    font-weight: 900 !important;
}

.poemkit-typo--style-italic {
    font-style: italic !important;
}

.poemkit-typo--style-noitalic {
    font-style: normal !important;
	
	em {
		font-style: normal !important;
	}
}

.poemkit-typo--style-underline {
    text-decoration: underline !important;
}

.poemkit-typo--style-tiny {
	font-size: 0.75rem !important;
}

.poemkit-typo--color-primary {
	color: $primary-text-color !important;
	
	p,
	h1, 
	h2, 
	h3, 
	h4, 
	h5, 
	h6, 
	.poemkit-typo--h1, 
	.poemkit-typo--h2, 
	.poemkit-typo--h3, 
	.poemkit-typo--h4, 
	.poemkit-typo--h5, 
	.poemkit-typo--h6 {
	    color: $primary-text-color;
	}
}


.poemkit-typo--color-highlight {
	color: $highlight-color1 !important;
	
	
	p,
	h1, 
	h2, 
	h3, 
	h4, 
	h5, 
	h6, 
	.poemkit-typo--h1, 
	.poemkit-typo--h2, 
	.poemkit-typo--h3, 
	.poemkit-typo--h4, 
	.poemkit-typo--h5, 
	.poemkit-typo--h6 {
	    color: $highlight-color1;
	}	
	
}

.poemkit-typo--color-sub {
	color: $sub-text-color !important;
	
	p,
	h1, 
	h2, 
	h3, 
	h4, 
	h5, 
	h6, 
	.poemkit-typo--h1, 
	.poemkit-typo--h2, 
	.poemkit-typo--h3, 
	.poemkit-typo--h4, 
	.poemkit-typo--h5, 
	.poemkit-typo--h6 {
	    color: $sub-text-color;
	}
}



.poemkit-typo--color-white {
	color: white !important;
	text-shadow: 0 0 1px rgba(0,0,0,.1);
	
	p,
	h1, 
	h2, 
	h3, 
	h4, 
	h5, 
	h6, 
	.poemkit-typo--h1, 
	.poemkit-typo--h2, 
	.poemkit-typo--h3, 
	.poemkit-typo--h4, 
	.poemkit-typo--h5, 
	.poemkit-typo--h6 {
	    color: white;
		text-shadow: 0 0 1px rgba(0,0,0,.1);
	}
}


/* 
 ---------------------------
 5. Drop Cap
 ---------------------------
 */ 
.poemkit-typo--dropcap::first-letter,
.poemkit-typo--dropcap > p:first-of-type::first-letter {
    display: block;
    margin-right: 10px;
    float: left;
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: -2px;
}

/* 
 ---------------------------
 6. Vertical Text
 ---------------------------
 */ 
.poemkit-typo--vertical {

	&:not(.poemkit-typo--vertical-characters-line) {
		writing-mode: vertical-rl;
		transform: translateX(.5rem);
		line-height: 0;/* Fix the problem of left-leaning text after rotation */
	
	}
	
	/* Defines the orientation of the text characters in a line.  */
	&.poemkit-typo--vertical-characters-line {
		width: 1px;
		word-wrap: break-word;
		line-height: 1;
		white-space: pre-wrap;/* this is for displaying whitespaces including Firefox */
	}
}

